import React,{useEffect, useState} from 'react'

export default function EffectHookCancelDemo() {
    const [count, setCount] = useState(0);
    useEffect(()=>{
        //在这里进行订阅
        console.log("订阅一些事件");
       
        //当组件消失即卸载掉的时候，就要进行订阅的取消
         //useEffect会有一个返回值，返回值还是一个函数, 当前组件卸载或者更新的时候都会来到这个函数
        return ()=>{
            console.log("取消订阅");
        }
    },[]); //加第三个参数：一个只可读的数组，可以防止在数据发生变化时频繁的尽行刷新,是一个性能优化
    return (
        <div>
            <h2>EffectHookCancelDemo</h2>
            <h2>{count}</h2>
            <button onClick={e => setCount(count +1 )}>+1</button>
        </div>
    )
}
